<template>
  <div>
    <div class="scroll-wrap">
      <div v-for="(item, idx) in list" :key="idx" class="upload-group">
        <h1 class="title">{{ item.title }}</h1>
        <div class="upload">
          <div class="wrap" v-for="(i, j) in item.upload" :key="j">
            <div
              class="bg"
              :style="{ backgroundImage: 'url(' + i.bg + ')' }"
              @click="handleFileClick(i)"
            >
              <img
                v-show="i.val"
                :src="i.val"
                alt="preview"
                class="preview"
                mode="scaleToFill"
              />
            </div>
            <p class="placeholder">{{ i.placeholder }}</p>
          </div>
        </div>
      </div>
      <button class="btn-action-red" @click="next">下一步</button>
    </div>
  </div>
</template>

<script>
import myMixin from '../mixins'
import { UPLOAD_IMAGE } from '@/api/new-open-shop'

export default {
  mixins: [myMixin],
  data () {
    return {
      list: [
        {
          title: '商家信息上传',
          upload: [
            {
              key: 'idCardImgPositive',
              placeholder: '身份证正面',
              bg: `https://akk.028wkf.cn/lovekakaCY-weapp-img/new-kdb-xcx/img/shangjaishangchu@3x.png`,
              val: ''
            },
            {
              key: 'idCardImgNegative',
              placeholder: '身份证反面',
              bg: `https://akk.028wkf.cn/lovekakaCY-weapp-img/new-kdb-xcx/img/sajsidpfj@3x.png`,
              val: ''
            },
            {
              key: 'license',
              placeholder: '营业执照',
              bg: `https://akk.028wkf.cn/lovekakaCY-weapp-img/new-kdb-xcx/img/shangjaishangchu@3x.png`,
              val: ''
            }
          ]
        },
        {
          title: '门店信息上传',
          upload: [
            {
              key: 'shopImg1',
              placeholder: '店铺室内图',
              bg: `https://akk.028wkf.cn/lovekakaCY-weapp-img/new-kdb-xcx/img/shuijietu@3x.png`,
              val: ''
            },
            {
              key: 'shopImg2',
              placeholder: '店铺室内图',
              bg: `https://akk.028wkf.cn/lovekakaCY-weapp-img/new-kdb-xcx/img/shineisd@3x.png`,
              val: ''
            }
          ]
        }
      ],
      form: {}
    }
  },
  computed: {
    bgStyle (image) {
      if (this.image) {
        return {}
      } else {
        return { 'background-image': `url('${this.background}')` }
      }
    }
  },
  onShow () {},
  methods: {
    handleFileClick (e) {
      const vm = this
      vm.$loading.show()
      UPLOAD_IMAGE()
        .then(r => {
          let res = JSON.parse(r.data)
          vm.$loading.close()
          if (res.code === '0') {
            e.val = res.data.imgPath
            vm.form[e.key] = e.val
          } else {
            vm.$toast(res.message)
          }
        })
        .catch(e => {
          vm.$loading.close()
          console.error(e)
        })
    },
    handleUploaded (url, key) {
      this.form[key] = url
    },
    verify () {
      let result = true
      let rules = this.list.reduce((acc, _) => {
        let arr = _.upload.map(i => ({
          key: i.key,
          message: '请上传' + i.placeholder
        }))
        acc.push(...arr)
        return acc
      }, [])

      for (const i of rules) {
        if (this.form.hasOwnProperty(i.key) && this.form[i.key]) {
          // do nothing
        } else {
          result = false
          this.$toast(i.message)
          break
        }
      }
      return result
    },
    next () {
      if (this.verify()) {
        this.updateSubmitData(this.form)
        this.$router.push(`/pages/new-open-shop/contact-info/main`)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background-color: #f6f6f6;
  > .upload-group {
    > .title {
      color: #eb4b66;
      font-size: 16px;
      line-height: 40px;
      padding: 0 20px;
    }
    > .upload {
      background-color: #fff;
      padding: 10px 10px 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      > .upload-unit {
        margin-bottom: 10px;
      }
      .wrap {
        width: 44vw;
        height: calc(28vw + 30px);
        border-radius: 8px;
        overflow: hidden;
        > .bg {
          position: relative;
          width: 100%;
          height: 28vw;
          background-color: #f6f6f6;
          background-size: cover;
          background-repeat: no-repeat;
          overflow: hidden;
          > .preview {
            width: 100%;
            height: 100%;
            display: block;
          }
          > .trigger {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
          }
        }
        > .placeholder {
          background-color: #b6b6b6;
          color: #fff;
          font-size: 14px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  > .btn-action-red {
    margin-top: 80px;
  }
}
</style>
